<template>
	<view class="bg">
		<xl-navbar title="Navbar固定导航栏" fixed shadow zIndex="999999"></xl-navbar>
		<view class="title">基础样式（只有返回，以及状态栏）</view>
		<!-- 只有返回按钮 -->
		<xl-navbar></xl-navbar>
		
		
		<!-- 页面滚动，从透明到渐变背景色，字体颜色由黑变白 -->
		<view class="title">从透明到背景色</view>
		<xl-navbar title="测试案例" transparent="toShow" color="#000000" background-color="#ffffff"/>
		
		<!-- 页面滚动，从透明到渐变背景色，字体颜色由黑变白 -->
		<view class="title">从透明到背景色，高亮返回图标</view>
		<xl-navbar title="测试案例" transparent="toShow" leftIconHighlight :color="['#ffffff', '#000000']" :background-color="['#93E0FF', '#2B6BFF']"/>
		
		<!-- 页面滚动，从渐变背景色到透明，字体颜色由白变黑 -->
		<view class="title">从背景色到透明</view>
		<xl-navbar title="测试案例" transparent="toHidden" :color="['#ffffff','#000000']" :background-color="['#93E0FF', '#2B6BFF']"/>

			
		<view class="title">返回、左文本、标题</view>
		<!-- 返回、左文本、标题 -->
		<xl-navbar title="测试案例" left-text="返回"/>
				
		<!-- 返回、标题、右图标 -->
		<view class="title">返回、标题、右图标</view>
		<xl-navbar title="测试案例" right-icon="xl-kefu" @click-right="clickMe"/>
			
		<!-- 左图标、标题，注意需要设置back为false -->
		<view class="title">左图标，需设置back为false</view>
		<xl-navbar title="测试案例" :back="false" left-icon="xl-search" @click-left="clickMe"/>
			
		<!-- 边框，如果配置了backUrl，则跳转至该路径页面，可以用path: sub_pages/pages/component/tabs，也可以用name：tabs-->
		<view class="title">边框，并修改返回路径</view>
		<xl-navbar backUrl="tabs" title="测试案例" border/>
			
		<!-- 阴影 -->
		<view class="title">阴影，右文本</view>
		<xl-navbar title="测试案例" shadow rightText="管理"/>
			
		<!-- 字体颜色、背景颜色 -->
		<view class="title">字体颜色、背景颜色</view>
		<xl-navbar title="测试案例" right-icon="xl-kefu" color="#ffffff" background-color="#93E0FF" />
			
		<!-- 渐变背景色，注意只能用多个的“数组rgb”描述，因为要用到透明度变化，会加上rgba -->
		<view class="title">渐变背景色，['#93E0FF', '#2B6BFF']，180deg</view>
		<xl-navbar title="测试案例" color="#ffffff" :background-color="['#93E0FF', '#2B6BFF']" background-color-linear-deg="180" />
			
		<!-- 状态栏背景颜色，状态栏字体颜色，只支持黑（#000000）和白（#ffffff）两种颜色。如果是数组['#000000', '#ffffff']，两种颜色，用于透明不透明切换-->
		<view class="title">状态栏背景、字体颜色（小程序、APP）</view>
		<xl-navbar title="测试案例" right-icon="xl-kefu" statusBarFontColor="#000000" statusBarBackground="#ff0000" />
		
		<!-- 透明背景，transparent背景透明的 -->
		<view class="title">透明背景</view>
		<xl-navbar title="测试案例" transparent="true" color="#333"/>
		
		
		<!-- 内容插槽（可不用写slot） -->
		<view class="title">内容插槽</view>		
		<xl-navbar right-icon="xl-search">
			<xl-search style="width: 100%;"></xl-search>
		</xl-navbar>
		
		<!-- 内容占用右边插槽，设置hiddenRight，如果左边icon宽度太大，可设置sideWidth -->
		<view class="title">内容占用中右插槽</view>
		<xl-navbar sideWidth="90" hiddenRight>
			<xl-search style="width: 100%;"></xl-search>
		</xl-navbar>
		
		
		<!-- 内容占用左右边插槽，设置hiddenLeft，hiddenRight-->
		<view class="title">内容占用左中右插槽</view>
		<xl-navbar hiddenLeft hiddenRight>
			<xl-search style="width: 100%;"></xl-search>
		</xl-navbar>
		
		<!-- 左插槽，内容插槽（可不用写slot），back要设置为false -->
		<view class="title">左插槽</view>
		<xl-navbar
		    :back="false" 
		    right-icon="xl-scan"
			@click-left="clickMe()"
			@click-right="clickMe()">
		    <template v-slot:left>
		        <view class="city">
		            <view>福州</view>
		            <xl-icon name="xl-down1" color="#333333" size="16" right="10"/>
		        </view>
		    </template>
			
			<view class="ctn">
			    <xl-icon name="xl-search" size="16" color="#666666" />
			    <input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" @confirm="confirm">
			</view>
		</xl-navbar>
	</view>
</template>

<script setup>
	
	import { ref, onMounted } from "vue";
	
	onMounted(()=>{
	
	})
	
	function clickMe(){
		uni.$xl.toast("你点我了")
	}
	
	function confirm(){
		uni.$xl.toast("确定")
	}
	
	
	
</script>

<style lang="scss" scoped>
	.ctn{
		border-radius: 40px;
		padding: 4px 15px;
		border: 1px solid #e3e3e3;
		display: flex;
		line-height: 44rpx;
		width: 100%;
	}
	.city{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-left: 8px;
		white-space: nowrap;
	}
</style>